<template>
  <div class="tselinput">
    <div class="outmain ba_f heighthv pad_20 bor_rad5">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>创建活动</span>
        </div>
      </div>
      <div class="mar_t20 flex-bet flex-y-top">
        <div class="flex-g-1">
          <el-form ref="form" :model="formData" label-width="180px">
            <el-form-item label="商品名称" :required="true" v-if="formData.id != ''">{{ formData.goodsName }}</el-form-item>
            <el-form-item label="活动时间" :required="true">
              <el-date-picker :disabled="formData.id != ''" v-model="formData.startTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
              <span class="mar_lr20">至</span>
              <el-date-picker v-model="formData.endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
            <template v-if="pageType == 1">
              <el-form-item label="活动类型" :required="true">
                <el-radio-group v-model="formData.type">
                  <el-radio label="1" :disabled="formData.id != ''">特价商品</el-radio>
                  <el-radio label="2" :disabled="formData.id != ''">折扣商品</el-radio>
                  <el-radio label="3" :disabled="formData.id != ''">立减商品</el-radio>
                </el-radio-group>
                <div v-if="formData.id">
                  <span>{{ formData.type == 3 ? '立减' : '' }}</span>
                  <el-input class="mar_lr10" v-model="formData.goodsMoney" style="width: 100px;" size="mini" :placeholder="'请输入几' + (formData.type == 2 ? '折' : '元')"></el-input>
                  <span>{{ formData.type == 2 ? '折' : '元' }}</span>
                </div>
              </el-form-item>
            </template>
            <el-form-item label="适用门店" :required="true">
              <el-radio-group v-model="formData.storeType" @change="storeTypeChang">
                <el-radio label="1">仅本店可用</el-radio>
                <el-radio label="2">全店通用</el-radio>
                <el-radio label="3">指定门店可用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="选择指定门店" :required="true" v-if="formData.storeType == 3">
              <el-scrollbar>
                <div class="recordBox">
                  <el-table ref="multipleTable" :data="storeArr" tooltip-effect="dark" style="width: 100%">
                    <el-table-column prop="name" label="门店名称"></el-table-column>
                    <el-table-column prop="address" label="门店地址"></el-table-column>
                    <el-table-column label="操作" align="center">
                      <template slot-scope="scope">
                        <div class="textbutton">
                          <el-button size="mini" type="text" @click="delStore(scope.$index)" class>删除</el-button>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-scrollbar>
              <div class="addgoods textbutton">
                <i class="el-icon-plus subjectcolor2"></i>
                <el-button type="text" class @click="addshop">添加门店</el-button>
              </div>
            </el-form-item>
            <el-form-item label="适用场景" :required="true">
              <el-checkbox-group v-model="formData.useType">
                <el-checkbox label="1">外卖</el-checkbox>
                <el-checkbox label="2">堂食</el-checkbox>
                <el-checkbox label="3">快餐</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="每日库存" :required="true" v-if="formData.id != ''">
              <el-input v-model="formData.stock" placeholder="请输入库存数量"></el-input>
            </el-form-item>

            <!-- 第二件折扣 -->
            <template v-if="pageType == 2">
              <el-form-item label="优惠方式" :required="true">
                <div class="time_item">
                  <el-radio-group v-model="formData.type">
                    <el-radio label="4">第二件折扣</el-radio>
                    <el-radio label="5">买一赠一</el-radio>
                  </el-radio-group>
                  <div v-if="formData.id && formData.type == 4">
                    <span>{{ formData.type == 4 ? '' : '' }}</span>
                    <el-input class="mar_lr10" v-model="formData.goodsMoney" style="width: 100px;" size="mini" :placeholder="'请输入几' + (formData.type == 4 ? '折' : '元')"></el-input>
                    <span>{{ formData.type == 4 ? '折' : '元' }}</span>
                  </div>
                  <div class="yb_margin lh16">顾客在同一个订单中最多可以购买几份该优惠商品</div>
                </div>
              </el-form-item>
            </template>

            <!-- 商品活动 -->
            <el-form-item label="每人限购" :required="true" v-if="formData.type != 4">
              <div class="time_item">
                <el-radio-group v-model="formData.limitType">
                  <el-radio label="1">不限次数</el-radio>
                  <el-radio label="2">自定义</el-radio>
                </el-radio-group>
                <span v-show="formData.limitType=='2'">
                  <el-input-number class="mar_lr10" size="mini" v-model="formData.limitNum" :min="1" controls-position="right" :max="1000000"></el-input-number>
                  <span>份</span>
                </span>
                <div class="yb_margin lh16">顾客在同一个订单中最多可以购买几份该优惠商品</div>
              </div>
            </el-form-item>

            <el-form-item label="选择外卖活动商品" prop="username" v-if="!formData.id && formData.useType.indexOf('1')>-1">
              <el-table ref="multipleTable" :data="formData.goodsArr" tooltip-effect="dark" style="width: 100%" class="tablecenter">
                <el-table-column prop="name" label="商品">
                  <template slot-scope="scope">
                    <div class="flex">
                      <div class="flex-g-0">
                        <el-image style="width: 60px;height: 60px;border-radius: 10px;" :src="scope.row.icon" fit="cover"></el-image>
                      </div>
                      <div class="flex-g-1 t_l">
                        <div class="mar_l10">{{scope.row.name}}</div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="price" label="原价" align="center"></el-table-column>
                <template v-if="formData.type == 4 && pageType == 2">
                  <el-table-column label="第二份折扣" width="300">
                    <template slot-scope="scope">
                      <div class="kucun2" style="display: flex; justify-content: center; align-items: center;">
                        <span style="min-width: 60px;">第二件</span>
                        <el-input-number size="mini" v-model="scope.row.money" :min="0" :max="9.9" label="描述文字"></el-input-number>
                        <span style="min-width: 60px;">折</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="活动价格">
                    <template slot-scope="scope">
                      <div>{{ (scope.row.price * ((scope.row.money ? scope.row.money : 10)/10)).toFixed(2) }}</div>
                    </template>
                  </el-table-column>
                </template>
                <el-table-column :label="typeName[formData.type]" width="300" v-if="pageType == 1">
                  <template slot-scope="scope">
                    <div class="kucun2" style="display: flex; justify-content: center; align-items: center;">
                      <span style="min-width: 60px;">每份</span>
                      <el-input-number v-if="formData.type == 2" size="mini" v-model="scope.row.money" :min="0" :max="9.9" label="描述文字"></el-input-number>
                      <el-input-number v-else size="mini" v-model="scope.row.money" :min="0" :max="scope.row.price - 0.1" label="描述文字"></el-input-number>
                      <span style="min-width: 60px;">{{ formData.type == 2 ? '折' : '元' }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="活动价格" v-if="formData.type != 1 && pageType==1">
                  <template slot-scope="scope">
                    <div v-if="formData.type == 1">{{ (scope.row.price - (scope.row.money ? scope.row.money : 0)).toFixed(2) }}</div>
                    <div v-if="formData.type == 2">{{ (scope.row.price*((scope.row.money ? scope.row.money : 10)/10)).toFixed(2) }}</div>
                    <div v-if="formData.type == 3">{{ (scope.row.price - (scope.row.money ? scope.row.money : 0)).toFixed(2) }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="每日库存">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.stock" placeholder="请输入库存数量">
                      <template slot="append">件</template>
                    </el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <div class="textbutton">
                      <el-button size="mini" type="text" @click="delGoods(scope.$index)" class>删除</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="addgoods textbutton" v-if="formData.goodsArr.length<1">
                <i class="el-icon-plus subjectcolor2"></i>
                <el-button type="text" @click="addgood">添加商品</el-button>
              </div>
            </el-form-item>

            <el-form-item label="选择店内活动商品" prop="username" v-if="!formData.id && (formData.useType.indexOf('2')>-1 || formData.useType.indexOf('3')>-1)">
              <el-table ref="multipleTable" :data="formData.goodsArr2" tooltip-effect="dark" style="width: 100%" class="tablecenter">
                <el-table-column prop="name" label="商品">
                  <template slot-scope="scope">
                    <div class="flex">
                      <div class="flex-g-0">
                        <el-image style="width: 60px;height: 60px;border-radius: 10px;" :src="scope.row.icon" fit="cover"></el-image>
                      </div>
                      <div class="flex-g-1 t_l">
                        <div class="mar_l10">{{scope.row.name}}</div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="price" label="原价" align="center"></el-table-column>
                <template v-if="formData.type == 4 && pageType == 2">
                  <el-table-column label="第二份折扣" width="300">
                    <template slot-scope="scope">
                      <div class="kucun2" style="display: flex; justify-content: center; align-items: center;">
                        <span style="min-width: 60px;">第二件</span>
                        <el-input-number size="mini" v-model="scope.row.money" :min="0" :max="9.9" label="描述文字"></el-input-number>
                        <span style="min-width: 60px;">折</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="活动价格">
                    <template slot-scope="scope">
                      <div>{{ (scope.row.price * ((scope.row.money ? scope.row.money : 10)/10)).toFixed(2) }}</div>
                    </template>
                  </el-table-column>
                </template>
                <el-table-column :label="typeName[formData.type]" width="300" v-if="pageType == 1">
                  <template slot-scope="scope">
                    <div class="kucun2" style="display: flex; justify-content: center; align-items: center;">
                      <span style="min-width: 60px;">每份</span>
                      <el-input-number v-if="formData.type == 2" size="mini" v-model="scope.row.money" :min="0" :max="9.9" label="描述文字"></el-input-number>
                      <el-input-number v-else size="mini" v-model="scope.row.money" :min="0" :max="scope.row.price - 0.1" label="描述文字"></el-input-number>
                      <span style="min-width: 60px;">{{ formData.type == 2 ? '折' : '元' }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="活动价格" v-if="formData.type != 1 && pageType==1">
                  <template slot-scope="scope">
                    <div v-if="formData.type == 1">{{ (scope.row.price - (scope.row.money ? scope.row.money : 0)).toFixed(2) }}</div>
                    <div v-if="formData.type == 2">{{ (scope.row.price*((scope.row.money ? scope.row.money : 10)/10)).toFixed(2) }}</div>
                    <div v-if="formData.type == 3">{{ (scope.row.price - (scope.row.money ? scope.row.money : 0)).toFixed(2) }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="每日库存">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.stock" placeholder="请输入库存数量">
                      <template slot="append">件</template>
                    </el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <div class="textbutton">
                      <el-button size="mini" type="text" @click="delGoods2(scope.$index)" class>删除</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="addgoods textbutton" v-if="formData.goodsArr2.length<1">
                <i class="el-icon-plus subjectcolor2"></i>
                <el-button type="text" @click="addgood2">添加商品</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="flex-g-0 pad_lr_20">
          <div class="fon_16">常见问题</div>
          <template v-if="pageType == 1">
            <el-collapse v-model="collapseName" accordion class="mar_tb10" style="width: 260px">
              <el-collapse-item title="什么是商品活动？" name="1">
                <div>商品活动是指可单独设置某个商品打折、立减、特价等优惠。</div>
              </el-collapse-item>
              <el-collapse-item title="商品活动限制说明" name="3">
                <div>同一个商品只能参加商品活动或第二件打折活动，不可同时参加。</div>
              </el-collapse-item>
              <el-collapse-item title="商品活动订单限制说明" name="2">
                <div>商品活动订单可设置与满减活动、门店优惠券等优惠活动互斥。</div>
              </el-collapse-item>
            </el-collapse>
          </template>
          <template v-else>
            <el-collapse v-model="collapseName" accordion class="mar_tb10" style="width: 260px">
              <el-collapse-item title="什么是第二件打折活动？" name="1">
                <div>第二件打折活动是指同一个订单同一个商品，用户购买第二件时，可享受一定的折扣。</div>
              </el-collapse-item>
              <el-collapse-item title="什么是买一赠一活动？" name="2">
                <div>买一赠一活动是指一个订单中，用户购买此商品可额外获得同一个商品。</div>
              </el-collapse-item>
              <el-collapse-item title="第二件打折活动限制说明" name="3">
                <div>同一个商品只能参加商品活动或第二件打折活动，不可同时参加。</div>
              </el-collapse-item>
            </el-collapse>
          </template>
          <div class="fon_16 mar_t20">活动规则</div>
          <div class="color_9 mar_t10 lh30 fon_13">
            <div>1.活动仅限在线支付订单；</div>
            <div>2.活动成本由商家承担，与店铺其他活动默认同享</div>
          </div>
        </div>
      </div>
    </div>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="submData">{{ this.formData.id ? '立即修改' : '立即创建' }}</el-button>
    </div>
    <!-- 商品库 -->
    <edit ref="edit" @fetchData="tableData" @fetchData2="tableData2"></edit>
    <!-- 门店列表 -->
    <shopEdit ref="ShopEdit" @fetchData="shopListData"></shopEdit>
  </div>
</template>
<script>
import { setGoodsActive, getGoodsActive } from '@/api/good.js';
import Edit from '../plug/components/selectgood';
import shopEdit from '../plug/components/selectshop';

export default {
  components: {
    Edit,
    shopEdit
  },
  data() {
    return {
      pageType: 1,
      formData: {
        id: '',
        goodsName: '',
        startTime: this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
        endTime: this.$moment(new Date(new Date().setDate(new Date().getDate() + 7))).format('YYYY-MM-DD HH:mm:ss'),
        type: '1',
        stock: 0,
        goodsMoney: '10',
        storeType: '1',
        useType: ['1'],
        storeArr: [],
        limitType: '1',
        limitNum: 0,
        goodsArr: [],
        goodsArr2: [],
        activityType: 1
      },
      storeArr: [],
      typeName: {
        1: '特价',
        2: '折扣',
        3: '立减'
      },
      collapseName: ''
    };
  },
  created() {
    this.formData.id = this.$route.query.id || '';
    this.formData.type = this.$route.query.pageType == 1 ? '1' : '4';
    this.pageType = this.$route.query.pageType || 1;
    this.formData.activityType = this.$route.query.pageType || 1;
    if (this.formData.id) {
      getGoodsActive({ id: this.formData.id }).then((res) => {
        if (res.code == 1) {
          this.storeArr = res.data.storeInfo;
          for (let key in this.formData) {
            this.formData[key] = res.data[key];
          }
        }
      });
    }
  },
  methods: {
    // 选中商品回调
    tableData(msg) {
      this.formData.goodsArr = msg;
    },
    tableData2(msg) {
      this.formData.goodsArr2 = msg;
    },
    addgood() {
      this.$refs['edit'].isGoodsInfo ('1');
      this.$refs['edit'].isDanXuan ('1');
      this.$refs.edit.isSpec('2');
      this.$refs.edit.showEdit(this.formData.goodsArr, 2, [this.formData.startTime, this.formData.endTime], 1);
    },
    delGoods(msg) {
      this.formData.goodsArr.splice(msg, 1);
    },
    addgood2() {
      this.$refs['edit'].isGoodsInfo ('2');
      this.$refs['edit'].isDanXuan ('1');
      this.$refs.edit.isSpec('2');
      this.$refs.edit.showEdit(this.formData.goodsArr2, 2, [this.formData.startTime, this.formData.endTime], 1);
    },
    delGoods2(msg) {
      this.formData.goodsArr2.splice(msg, 1);
    },
    // 获取时间段
    getTime(msg) {
      this.timeData = msg;
    },
    // 适用门店变化时
    storeTypeChang(msg) {
      if (msg != 3) {
        this.formData.storeArr = [];
        this.storeArr = [];
      }
    },
    // 选择指定门店
    addshop(row) {
      this.$refs.ShopEdit.showEdit();
    },
    // 选中门店后的回调
    shopListData(msg) {
      this.formData.storeArr = msg.map((item) => {
        return item.id;
      });
      this.storeArr = msg;
    },
    //删除选中门店
    delStore(index) {
      console.log(index);
      this.formData.storeArr.splice(index, 1);
      this.storeArr.splice(index, 1);
    },
    // 提交表单
    submData() {
      setGoodsActive(this.formData).then((res) => {
        if (res.code == 1) {
          this.$baseMessage(this.formData.id ? '修改成功！' : '保存成功！', 'success');
          history.back();
        }
      });
    }
  }
};
</script>
<style lang="scss">
.tselinput{
  .el-input-number {
    width: auto;
    height: 28px;
    line-height: 28px
  }
  .el-input--mini{
    height: 28px;
    line-height: 28px
  }
}

</style>
